<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	<body>
		<div id="app">
			<mycpn1>
				<p style="color: red;">我是插槽的内容</p>
				<p style="color: red;">如果组件中不用插槽，这里不会显示</p>
			</mycpn1>
			-----------------------------------------------
			<mycpn2>
				<p slot='shuangshuang' style="color: blue;">shuangshuang插槽</p>
				<p slot='cute' style="color: blue;">cute插槽</p>
			</mycpn2>
			************************************************
			<cpn v-for="item in list">
				<span slot='ss' >{{item}}</span>
				<span slot='ss2' style="color: red;" >播放</span>
				<!-- <p slot='ss2' v-for="item in list2">{{item}}</p> -->
			</cpn>
			************************************************
			<p v-for="item in list">{{item}}</p>
		</div>
	</body>
	
	<script src="../utils/vue.js"></script>
	<script>
		//全局组件
		Vue.component('mycpn1',{
			template:`
				<div>
					<p> ↓ 是匿名插槽的内容</p>
					<slot></slot>
					<p> ↑ 是匿名插槽的内容</p>
				</div>
			`
		});
		//全局组件
		Vue.component('mycpn2',{
			template:`
				<div>
					<p> ↓ 是具名插槽的内容</p>
					<slot name='shuangshuang'></slot>
					<slot name='cute'></slot>
					<p> ↑ 是具名插槽的内容</p>
				</div>
			`
		})
		
		var vm = new Vue({
			el:"#app",
			data:{
				list:['双双','小可爱','最棒'],
				list2:['双双2','小可爱2','最棒2'],
			},
			components:{
				cpn:{
					template:`
						<div>
							<ul>
								<img src="../img/hua.png" style='width:20px'/>
								<slot name='ss'></slot>
								<slot name='ss2'></slot>
							</ul>
						</div>
					`
				}
			}
		})
	</script>
</html>
